
import React from 'react';

// 采用 class 定义的组件(并继承React.Component)都是有状态组件
export default class Counter extends React.Component {
    //state = { value: 1 }
    constructor(){
        super();
        this.state = { 
            value: 1 
        }
    }
    // 将一个箭头函数作为值赋值给一个实例属性
    handleClick = ()=>{
        console.log( this.state.value );
        // 通过 setState 来修改状态 ( 参数是个对象，其中包含被修改的属性 )
        this.setState( { 
            value: this.state.value + 1 
        } );
    }
    // 在 render 函数中采用 JSX 形式返回
    render(){
        // 在 JSX 中通过 `onEventType` 形式绑定事件监听器 ( 比如 onClick 、onMouseOver )
        // 绑定事件监听器时，需要为 函数绑定 函数执行时其内部的 this 指向
        return (<div>
                    <button onClick={ this.handleClick } className='counter'>
                        {this.state.value}
                    </button>
               </div>);
    }
}
